<template>
  <div>
    <img :src="imgSrc" alt="">
    <el-button @click="addImg">生成</el-button>
    <el-button @click="add_node_echarts">node-echarts</el-button>
    <el-select v-model="selectValue" size="small">
      <el-option :label="'a'" value="'a'">a</el-option>
      <el-option :label="'b'" value="'b'">b</el-option>
    </el-select>
    评论：
    <ul class="comment-ul">
      <li v-for="(o, index) in list" :key="index" class="comment-list">{{o.value}}</li>
    </ul>
    <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
    <el-button type="danger" @click="submit">提交</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'querystring';
export default {
  data () {
    return {
      list: [],
      content: '',
      selectValue: '',
      imgSrc: ''
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      axios.get('/api/getComment').then(res => {
        this.list = res.data.comment
      })
    },
    submit () {
      axios({
        method: 'post',
        url: '/api/addComment',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
        data: qs.stringify({
          comment: this.content
        })
      }).then(res => {
        this.content = ''
        this.getData()
      }).catch((err) => {
      })
    },
    addImg () {
      axios.get('/api/getImg').then(res => {
        this.imgSrc = 'data:image/png;base64,' + res.data
        console.log(11, res)
      })
    },
    add_node_echarts () {
      axios.get('/api/getNodeEcharts').then(res => {
        console.log(11, res)
      })
    }
  }
}
</script>

<style lang="scss">
.comment-ul {
  width: 200px;
  margin: auto;
  .comment-list {
    border: 1px solid #e1e1e1;
    width: 200px;
  }
}
</style>
